
<!-- <a href="" target="_blank">
  Back to Amazon
</a>

<p>
  Nike Black Running Shoes
</p>

<p>
  $39 - in stock
</p>

<p>
  Free delivery tomorrow
</p>

<button>
  Add to Cart
</button>

<button>
  Buy now
</button> -->


<!-- <style>
.subscribe-button{
  background-color: rgb(202, 11, 11);
  color: white;
  border: none;
  border-radius: 2px;
  height: 36px;
  width: 115px;
  cursor: pointer;
  margin-right: 10px;

}

.join-button{
  background-color: white;
  border-color: rgba(24, 102, 205, 0.911);
  color:rgba(24, 102, 205, 0.911);
  border-style: solid;
  border-width: 1px;
  height: 36px;
  width: 70px;
  border-radius: 2px;
  cursor: pointer;
  font-weight: 520;
}

.tweet-button{
  background-color: rgb(17, 147, 239);
  color: white;
  border: none;
  height: 35px;
  width: 75px;
  border-radius: 17px;
  font-weight: bold;
  cursor: pointer;
  margin-left: 10px;


}


</style>


 <button class="subscribe-button">
  SUBSCRIBE
 </button>

<button class="join-button">
  JOIN
</button>

<button class="tweet-button">
  Tweet
</button> -->

<!-- <style>
.a-button{
  color: white;
  background-color: black;
  border: none;
  height: 40px;
  width: 120px;
}

.b-button{
  background-color: rgba(255, 216, 20);
  color: black;
  height: 36px;
  width: 120px;
  border-radius: 18px;
  border: none;
  cursor:pointer;


}

.c-button{
  color: white;
  background-color: rgb(46, 164, 79);
  border: none;
  border-radius: 8px;
  font-weight: bold;
  height: 36px;
  width: 100px;

}

.d1-button{
  background-color: rgb(121, 82, 179);
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 2px;
  height: 36px;
  width: 100px;
  cursor: pointer;
}

.d2-button{
  background-color:white;
  color: rgb(108,117, 125);
  height: 36px;
  width: 100px;
  font-weight: bold;
  border-color: black;
  border-width: 1px;
  border-radius: 2px;
  margin-left: 10px;
  cursor: pointer;
}

.e1-button{
  background-color: rgb(10, 102, 194);
  color: white;
  border: none;
  border-radius: 18px;
  width: 200px;
  height: 36px;
  cursor: pointer;
  font-weight: bold;
}

.e2-button{
  background-color: white;
  color: rgb(10, 102, 194);
  border-color: rgb(10, 102, 194);
  border-width: 1px;
  height: 36px;
  width: 80px;
  border-radius: 18px;
  cursor: pointer;
  font-weight: bold;
  margin-left: 10px;
}
</style>


<button class="a-button">
  Request now
</button>

<p>

</p>

<button class="b-button">
  Add to Cart
</button>

<p>

</p>

<button class="c-button">
  Sign up
</button>

<p>

</p>

<button class="d1-button">
  Get started
</button>

<button class="d2-button">
  Download
</button>

<p></p>

<button class="e1-button">
  Apply on company website
</button>

<button class="e2-button">
  Save
</button> -->


<!-- <style>
.back{
  color: rgb(0, 113, 133);
  font-size: large;
}

.nike{
  font-size: larger;
  color: black;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.dollar{
  color: rgb(0, 118, 0);
  font-weight: bold;
}

.button-1{
  color: black;
  background-color: rgb(255, 216, 20);
  width: 120px;
  height: 36px;
  border: none;
  border-radius: 18px;
  cursor: pointer;
}

.button-2{
  color: black;
  background-color: rgb(255,164,28);
  width: 120px;
  height: 36px;
  border: none;
  border-radius: 18px;
  margin-left: 10px;
  cursor: pointer;
}

<!-- </style>

<a  class="back" href="" target="_blank">
  Back to Amazon
</a>

<p class="nike">
  Nike Black Running Shoes
</p>

<p class="dollar">
  $39 - in stock
</p>

<p class="delivery">
  Free delivery tomorrow
</p>

<button class="button-1">
  Add to Cart
</button>

<button class="button-2">
  Buy now
</button> -->


 <!-- <style>
  .button-1{
    color: white;
    background-color: rgb(170,0,0);
    border: none;
    width: 120px;
    height: 36px;
    border-radius: 2px;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.15s;
  }

  .button-1:hover{
    opacity: 0.8;
  }

  .button-1:active{
    opacity: 0.5;
  }

  .button-2{
    color:rgb(14,68,139);
    background: white;
    border-width: 1px;
    border-color:rgb(14,68,139);
    border-radius: 2px;
    margin-left: 10px;
    margin-right: 10px;
    height: 36px;
    width: 80px;
    font-weight: bold;
    border-style: solid;
    transition: background-color 0.15s,color 0.15s,opacity 0.15s;
  }

  .button-2:hover{
    background-color: rgb(14,68,139);
    color:white ;
  }

  .button-2:active{
    opacity: 0.5;
  }
  .button-3{
    color: white;
    background-color: rgb(23,125,206);
    font-weight: bold;
    height: 36px;
    width: 80px;
    border: none;
    border-radius: 18px;
    transition: box-shadow 0.3s,background-color 0.15s,opacity 0.3s;
    
}
  .button-3:hover{
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  }

  .button-3:active{
    opacity: 0.5;
  }

</style>

<button class="button-1">
  SUBSCRIBE
</button>

<button class="button-2">
  JOIN
</button>

<button class="button-3">
  Tweet
</button>  -->

<!-- <style>
.button-1{
  background-color: black;
  color: white;
  font-weight: bold;
  width: 120px;
  height: 36px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.15s;


}

.button-1:hover{
  opacity: 0.7;
}

.button-1:active{
  opacity: 0.6;
}

.button-2{
  background-color:rgb(255,216,20);
  color: black;
  height: 36px;
  width: 120px;
  border: none;
  font-weight: bold;
  border-radius: 18px;
  transition: background-color 0.3s;
}

.button-2:hover{
  background-color: rgb(245,194,1);
}

.button-2:active{
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.button-3{
  font-weight: bold;
  color: white;
  background-color: rgb(42,155,70);
  height: 36px;
  width: 90px;
  border: none;
  border-radius: 4px;
  transition: box-shadow 0.2s;
}

.button-3:hover{
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.button-4{
  color: white;
  font-weight: bold;
  background-color: rgb(92,61,144);
  border: none;
  height: 36px;
  width: 100px;
  border-radius: 4px;
  transition: background-color 0.3s;
  margin-right: 10px;
}

.button-4:hover{
  background-color: rgb(75,49,112);
}

.button-5{
  color: white;
  font-weight: bold;
  background-color: rgb(91,98,105);
  height: 36px;
  border: none;
  width: 100px;
  border-radius: 4px;
  transition: color 0.3s,background-color 0.3s;
}

.button-5:hover{
  background-color: white;
  color: rgb(91,98,105);
  border: solid;
  border-width:  1px;
  border-color: rgb(91,98,105);

}

.button-6{
  color: white;
  font-weight: bold;
  background-color: rgb(11,79,163);
  height: 36px;
  width: 300px;
  border: none;
  border-radius: 18px;
  transition: opacity 0.3s;
}

.button-6:hover{
  opacity: 0.8;
}

.button-7{
  color: rgb(16,80,160);
  border-width: 1px;
  border-style: solid;
  border-color: rgb(16,80,160);
  background-color: white;
  font-weight: bold;
  height: 36px;
  width: 70px;
  margin-left: 10px;
  border-radius: 18px;
  transition: background-color 0.2s,border-width;
}

.button-7:hover{
  background-color: rgb(202,215,230);
  border-width: 2px;
}

</style>

<button class="button-1">
  Request now
</button>
<p></p>
<button class="button-2">
  Add to Cart
</button>

<p></p>

<button class="button-3">
  Sign up
</button>

<p></p>

<button class="button-4">
  Get started
</button>

<button class="button-5">
  Download
</button>

<p></p>

<button class="button-6">
  Apply on company website
</button>

<button class="button-7">
  Save
</button> -->


 <!-- <style>
  .button-1{
    color: white;
    background-color: rgb(170,0,0);
    border: none;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 2px;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.15s;
    vertical-align: top;
  }

  .button-1:hover{
    opacity: 0.8;
  }

  .button-1:active{
    opacity: 0.5;
  }

  .button-2{
    color:rgb(14,68,139);
    background: white;
    border-width: 1px;
    border-color:rgb(14,68,139);
    border-radius: 2px;
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-weight: bold;
    border-style: solid;
    vertical-align: top;
    transition: background-color 0.15s,color 0.15s,opacity 0.15s;
  }

  .button-2:hover{
    background-color: rgb(14,68,139);
    color:white ;
  }

  .button-2:active{
    opacity: 0.5;
  }
  .button-3{
    color: white;
    background-color: rgb(23,125,206);
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    border: none;
    border-radius: 18px;
    transition: box-shadow 0.3s,background-color 0.15s,opacity 0.3s;
    vertical-align: top;
    
}
  .button-3:hover{
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  }

  .button-3:active{
    opacity: 0.5;
  }

</style>

<button class="button-1">
  SUBSCRIBE
</button>

<button class="button-2">
  JOIN
</button>

<button class="button-3">
  Tweet
</button>  -->

<!-- lesson-4 -->
<!-- <style>
.button-1{
  margin-right: 10px;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 3px;
  padding-bottom: 3px;
}

a{
  margin: 4px;
}

.button-2{
  margin-left: 10px;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 3px;
  padding-bottom: 3px;
}

</style>


<button class="button-1">
  Back
</button>

<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>

<button class="button-2">
  Next
</button>
 -->

<!-- <style>
.button-1{
  color: white;
  background-color: rgb(1,117,1);
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 20px;
  padding-right: 20px;
  transition: padding-right 0.2s,padding-bottom 0.2s;
  border: none;
}

.button-1:hover{
  padding-right: 40px;
  padding-bottom: 24px;
}
</style>


<button class="button-1">
Stretch
</button>

<p></p> -->


<style>
    button{
    background-color: rgb(1,103,1);
    color: white;
      padding: 10px 20px;
    margin-left: 10px;
    margin-right: 10px;
    font-weight: bold;
    border: none;
    transition: padding 0.15s,margin 0.15s;


} 


  button:hover{
    padding: 10px 30px;
    margin-right: 0px;
    margin-left: 0px;
  }




</style>

<button>
  One
</button>

<button>
  Two
</button>

<button>
  Three
</button>